<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { ref, getCurrentInstance } from 'vue'
	import { getFileType } from '@/utils/common'
	import { getCommis, addCommis, updateCommis } from '@/api/report'
	import { uploadFile } from '@/api/login'
	const instance = getCurrentInstance().proxy
	
	const loading = ref(false)
	const uForm = ref(null)
	const form = ref({
		chefId: undefined,
		assistName: undefined,
		telephone: undefined,
		health: null,
		qualified: null
	})
	const rules = ref({
		assistName: [
			{required: true, message: '请输入姓名', trigger: 'blur'}
		],
		telephone: [
			{required: true, message: '请输入联系电话', trigger: 'blur'},
			{
				validator: (rule, value, callback) => {
					return uni.$uv.test.mobile(value)
				},
				message: '联系电话格式错误',
				trigger: 'blur'
			}
		],
		health: [
			{type: 'object', required: true, message: '请上传健康证', trigger: 'change'}
		]
	})
	
	function getData(id) {
		loading.value = true
		getCommis(id).then(res => {
			let data = res.result || {}
			form.value = data
			loading.value = false
		}).catch(() => loading.value = false)
	}
	function chooseImg(props, name) {
		if(loading.value) return
		let typeList = ['png', 'jpg']
		uni.chooseImage({
			count: 1,
			sourceType: ['album', 'camera'], // 可以选择相册或相机
			success: async res => {
				let list = res.tempFiles
				let errType = list.some(file => !typeList.includes(getFileType(file.path)))
				if (errType) {
					uni.showToast({icon: 'none', title: '请上传图片格式为png/jpg'})
					return
				}
				let moreSize = list.some(file => file.size > 5242880)
				if (moreSize) {
					uni.showToast({icon: 'none', title: '上传图片大小不能超过5M'})
					return
				}
				loading.value = true
				for (let i = 0; i < list.length; i++) {
					try {
						const result = await uploadFile({filename: name, filePath: list[i].path})
						form.value[props] = result.result
					} catch (e) {}
				}
				uForm.value.validateField(props)
				loading.value = false
			}
		})
	}
	function removeImg(props){
		form.value[props] = null
		uForm.value.validateField(props)
	}
	function viewImg(props) {
		let urls = [form.value[props].furl]
		uni.previewImage({
			urls
		})
	}
	function submit() {
		uForm.value.validate().then(() => {
			loading.value = true
			if(form.value.chefId) {
				updateCommis(form.value).then(res => {
					loading.value = false
					uni.showToast({
						icon: 'success',
						title: '修改成功'
					})
					setTimeout(()=>{
						uni.navigateBack({
							success: () => {
								const eventChannel = instance.getOpenerEventChannel()
								eventChannel.emit('selectHelper', uni.$uv.deepClone(form.value))
							}
						})
					}, 1000)
				}).catch(() => loading.value = false)
			} else {
				addCommis(form.value).then(res => {
					loading.value = false
					uni.showToast({
						icon: 'success',
						title: '保存成功'
					})
					setTimeout(()=>{uni.navigateBack()}, 1000)
				}).catch(() => loading.value = false)
			}
		})
	}
	
	onLoad((option) => {
		if(option.id){
			uni.setNavigationBarTitle({
				title: '编辑帮厨'
			})
			getData(option.id)
		}
	})
</script>

<template>
	<view class="app-container">
		<uv-form :model="form" :rules="rules" ref="uForm" labelWidth="auto">
			<view class="form-box">
				<uv-form-item label="帮厨姓名" prop="assistName" required borderBottom>
					<uv-input v-model="form.assistName" placeholder="请输入帮厨姓名" border="none" inputAlign="right" maxlength="32" clearable />
				</uv-form-item>
				<uv-form-item label="联系电话" prop="telephone" required borderBottom>
					<uv-input type="number" v-model="form.telephone" placeholder="请输入联系电话" border="none" inputAlign="right" maxlength="11" clearable />
				</uv-form-item>
				<uv-form-item prop="health">
					<view class="image-box">
						<view class="image-item" v-if="form.health">
							<uv-image :src="form.health.furl" width="100%" height="100%" @click="viewImg('health')"></uv-image>
							<view class="image-del" @click="removeImg('health')">
								<uv-icon name="close" color="#FFFFFF" size="30" />
							</view>
						</view>
						<view class="image-item select" v-else @click="chooseImg('health', '健康证')">
							<view class="circle"><uv-icon name="arrow-upward" color="#fff" size="46" /></view>
							<text class="tip required">上传健康证</text>
						</view>
					</view>
				</uv-form-item>
				<uv-form-item prop="qualified" :custom-style="{marginTop: '-32rpx'}">
					<view class="image-box">
						<view class="image-item" v-if="form.qualified">
							<uv-image :src="form.qualified.furl" width="100%" height="100%" @click="viewImg('qualified')"></uv-image>
							<view class="image-del" @click="removeImg('qualified')">
								<uv-icon name="close" color="#FFFFFF" size="30" />
							</view>
						</view>
						<view class="image-item select" v-else @click="chooseImg('qualified', '培训合格证')">
							<view class="circle"><uv-icon name="arrow-upward" color="#fff" size="46" /></view>
							<text class="tip">上传培训合格证</text>
						</view>
					</view>
				</uv-form-item>
			</view>
		</uv-form>
		<view class="form-bottom">
			<uv-button type="primary" shape="circle" text="保存" :custom-style="{height: '84rpx'}" @click="submit" :disabled="loading"></uv-button>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.app-container{
		padding-top: 2rpx;
		padding-bottom: 164rpx;
		.form-box{
			background-color: #fff;
			padding: 0 32rpx;
			.custom-content{
				display: flex;
				justify-content: flex-end;
				gap: 10rpx;
			}
			.text-disable{
				color: #727687;
			}
			.text-no{
				color: #c0c4cc;
			}
			::v-deep .uv-form-item__body{
				padding: 32rpx 0;
			}
			::v-deep .uv-form-item__body__left__content__required{
				left: unset;
				right: -8rpx;
			}
			::v-deep .uv-form-item__body__left__content__label {
				font-size: var(--theme-df);
			}
			::v-deep .uv-input__content__field-wrapper__field {
				font-size: var(--theme-df) !important;
				line-height: var(--theme-df-line) !important;
			}
			::v-deep .uv-form-item__body__right__message{
				font-size: var(--theme-sm);
				line-height: var(--theme-sm-line);
			}
			::v-deep .uv-form-item__body__right__content{
				font-size: var(--theme-df) !important;
				line-height: var(--theme-df-line) !important;
			}
			.image-box{
				width: 100%;
				height: 376rpx;
				border: 2rpx dashed #ADB0BD;
				border-radius: 8rpx;
				.image-item{
					width: 100%;
					height: 100%;
					position: relative;
					.image-del{
						position: absolute;
						top: 0;
						right: 0;
						width: 36rpx;
						height: 36rpx;
						background-color: rgba(28,33,62,0.5);
						border-top-right-radius: 8rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					}
					&.select{
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						gap: 32rpx;
						background-color: #F5F6F8;
						.circle{
							width: 96rpx;;
							height: 96rpx;;
							border-radius: 58rpx;
							background-color: $uv-primary;
							display: flex;
							justify-content: center;
							align-items: center;
						}
						.tip{
							color: #727687;
							&.required::after{
								content: "*";
								color: #F53F3F;
							}
						}
					}
				}
			}
		}
		.form-bottom{
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0rpx;
			z-index: 1;
			height: 132rpx;
			padding: 24rpx 40rpx;
			background-color: #FFFFFF;
			box-shadow: 0rpx -8rpx 8rpx 0rpx rgba(0,0,0,0.04);
			::v-deep .uv-button__text{
				font-size: var(--theme-lg) !important;
			}
		}
	}
</style>